<template>
	<view class="slide-popup-component" :style="{zIndex: zIndex}">
		<view :class="['mask', {'final-mask': final}]"
		v-if="show" @click="close"></view>
		<view :class="['container', {'final-container': final}]"
		:style="{height: height, bottom: bottom}"
		v-if="show">
			<slot></slot>
		</view>
	</view>
</template>

<script>
export default {
	name:"slide-popup",
	props: {
		modelValue: Boolean,
		height: {
			type: String,
			default: "50%"
		},
		bottom: {
			type: String,
			default: "0"
		},
		zIndex: {
			type: Number,
			default: 100
		},
		clickMaskClose: {
			type: Boolean,
			default: true
		}
	},
	emits: ['update:modelValue', "closed"],
	data() {
		return {
			// 显示
			show: false,
			final: false,
			timeId: { t: -1, f: -1 }
		};
	},
	watch: {
		"modelValue": {
			handler (v) {
				if (v) {
					this.show = true
					clearTimeout(this.timeId.f)
					this.timeId.t = setTimeout(() => {
						this.final = true 
					}, 20)
				} else {
					this.final = false
					clearTimeout(this.timeId.t)
					this.timeId.f = setTimeout(() => {
						this.$emit("closed")
						this.show = false
					}, 490)
				}
			},
			immediate: true
		}
	},
	methods: {
		close () {
			if (this.clickMaskClose) {
				this.$emit('update:modelValue', false)
			}
		},
		confirm () {
			this.close()
		}
	}
}
</script>

<style lang="less">
.slide-popup-component {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	
	.mask {
		width: 100vw;
		height: 100vh;
		background: #000000;
		opacity: 0;
		transition: .2s;
	}
	
	.final-mask {
		opacity: 0.7;
	}
	
	.container {
		position: absolute;
		bottom: 0;
		width: 100%;
		transform: translateY(100%);
		transition: .5s;
		background: #FFFFFF;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}
	
	.final-container {
		transform: translateY(0);
	}
}
</style>